<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>5-vfor-tempalte</title>
  </head>

  <body>
    <div id="vfor-tempalte">
      <!-- 类似于 v-if，可以利用带有 v-for 的 <template>
           来循环渲染一段包含多个元素的内容。比如： -->
      <ul>
        <template v-for="item in items">
          <li>{{ item.msg }}</li>
          <li class="divider" role="presentation"></li>
        </template>
      </ul>
      <!-- 不推荐在同一元素上使用 v-if 和 v-for 
           当它们处于同一节点，v-if 的优先级比 v-for 更高，
           这意味着 v-if 将没有权限访问 v-for 里的变量： -->
      <ul>
        <!-- <li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}</li> -->
      </ul>
      <ul>
        <!-- 可以把 v-for 移动到 <template> 标签中来修正 -->
        <template v-for="todo in todos">
          <li v-if="!todo.isComplete">{{ todo }}</li>
        </template>
      </ul>
    </div>
    <script>
      Vue.createApp({
        data() {
          return {
            items: [{ msg: 'hello' }, { msg: 'world' }],
            todos: [
              { name: 'todo1', isComplete: true },
              { name: 'todo2', isComplete: false },
              { name: 'todo3', isComplete: true },
            ],
          };
        },
      }).mount('#vfor-tempalte');
    </script>
  </body>
</html>
